<template>
    <view class="content">
        <view class="charts-box" style="height: 400px;">
            <qiun-data-charts
                type="map"
                :opts="config"
                canvasId="mapma"
                :chartData="chartsDataMap"
                @getIndex="getIndex"
            />
        </view>
    </view>
</template>

<script>

import uCharts from "@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts";
    export default {
        props: ['mapData'],
        data() {
            return {
                chartsDataMap: {

                    color: ['#a7afff'],
                    tooltip: {
                        trigger: '你好',

                    },
                    visualMap: {
                        color: ['#0052D9', '#A7D5FC'],
                        min: 0,
                        max: 9999,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],           // 文本，默认为数值文本
                        calculable: false,
                    },
                    series: [],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    // visualMap: {
                    //     color: ['#0052D9', '#A7D5FC'],
                    //     left: 'left',
                    //     top: 'bottom',
                    //     text: ['高', '低'],           // 文本，默认为数值文本
                    //     calculable: false,
                    // },
                },
                // 覆盖的是 option
                config: {
                    extra: {
                        map: {
                            mercator: true
                        }
                    }
                }
            }
        },
        methods: {
            getIndex(e) { // 点击地图进行操作
                console.log(e, "===uCharts====")
            }
        },
        created() {
            uCharts.map = {
                "type": "map",
                "canvasId": "",
                "canvas2d": false,
                "background": "none",
                "animation": true,
                "timing": "easeOut",
                "duration": 200,
                "color": ['#ff4455'],
                "padding": [
                    0,
                    0,
                    0,
                    0
                ],
                "rotate": false,
                "errorReload": true,
                "fontSize": 8,
                "fontColor": "#666666",
                "enableScroll": false,
                "touchMoveLimit": 60,
                "enableMarkLine": false,
                "dataLabel": true,
                "dataPointShape": true,
                "dataPointShapeType": "solid",
                "tapLegend": true,
                "extra": {
                    "map": {
                        "border": true,
                        "mercator": false,
                        "borderWidth": 1,
                        "borderColor": "#666666",
                        "fillOpacity": 0.6,
                        "activeBorderColor": "#55aa00",
                        "activeFillColor": "#FF0033", //设置 鼠标 悬停 地图展示的背景颜色
                        "activeFillOpacity": 1
                    },
                    "tooltip": {
                        "showBox": true,
                        "showArrow": true,
                        "showCategory": false,
                        "borderWidth": 0,
                        "borderRadius": 0,
                        "borderColor": "#000000",
                        "borderOpacity": 0.7,
                        "bgColor": "#000000",
                        "bgOpacity": 0.7,
                        "gridType": "solid",
                        "dashLength": 4,
                        "gridColor": "#CCCCCC",
                        "fontColor": "#FFFFFF",
                        "splitLine": true,
                        "horizentalLine": false,
                        "xAxisLabel": false,
                        "yAxisLabel": false,
                        "labelBgColor": "#FFFFFF",
                        "labelBgOpacity": 0.7,
                        "labelFontColor": "#666666"
                    }
                }
            }
            this.chartsDataMap.series = this.mapData

            console.log(this.chartsDataMap, 'chartsDataMap')
        }
    }
</script>

<style scoped lang="scss">
.content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.charts-box {
    width: 100%;
    height: 360px;
}

</style>
